<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>画板</title>
    <link rel="stylesheet" href="21.CSS">
</head>
<body>

    <canvas id="canvas"width="100" height="100">    </canvas>

    <script> 

          let canvas = document.getElementById("canvas");
          canvas.width = document.documentElement.clientWidth;//定义画布的宽度
          canvas.height= document.documentElement.clientHeight;//定义画布的高度
        
          // 这里是canvas  的一个预设的的东西 ctx，以后可以搜搜具体用法
          let ctx = canvas.getContext("2d"); 
          ctx.fillStyle="black"
          ctx.strokeStyle="black"
           ctx.lineWidth=8;
           ctx.lineCap = "round";
          let  painting =false; // 一个重要的变量
          let last ;  // 一个重要的变量
 //这是手机触屏版本的模块
        var isTouchDevice ='ontouchstart' in  document.documentElement;
          if (isTouchDevice){
        canvas.ontouchstart =(e)=>{
            let x =e.touches[0].clientX
            let y =e.touches[0].clientY
            last = [x,y]
        }
         canvas.ontouchmove=(e)=>{
            let x =e.touches[0].clientX
            let y =e.touches[0].clientY
            drawLine(last[0],last[1],x,y)
           last = [x,y]
         }
        
        } else {
//这是手机触屏版本和移动模块的分界线
          canvas.onmousedown =(e) =>{
              painting =true            
              last = [e.clientX,e.clientY]
         }

          canvas.onmousemove= (e) => { //浏览器会调用canvas.onmousemove 然后会改变这个值 这个e没用含义，就是一个形参
               if (painting === true){
               drawLine(last[0],last[1],e.clientX,e.clientY)
               last = [e.clientX,e.clientY]
                }  
            
            }

           canvas.onmouseup =(e) =>{
              painting =false
         }
           }

           function drawLine (q,w,e,r) //qwer是形参，无特别含义
         {
           ctx.beginPath();
           ctx.moveTo(q, w);
           ctx.lineTo(e, r);
           ctx.stroke();
         }
//这是移动模块
//这是点击模块
        //   canvas.onclick= (e) => {
                 
        //        ctx.beginPath();
        //        ctx.arc(e.clientX,e.clientY,10,0,2*Math.PI)
        //        ctx.stroke();
        //        ctx.fill();
        //   }
//这是点击模块          
          //canvas.onclick= (e) => {
      //  canvas.onmousemove= (e) => {
         //   console.log(e.clientX)
         //   console.log(e.clientY)
            //console.log 调试大法
         //   let div =document.createElement('div')
         //   div.style.position = 'absolute'
         //   div.style.left = e.clientX+'px'
         //   div.style.top = e.clientY+'px'
        //div.style.width='6px'
          //  div.style.height='6px'
           // div.style.marginLeft = '-2px'
           // div.style.marginTop = '-3px'
          //  div.style.borderRadius='50%'
          //  div.style.backgroundColor='black'
          //  canvas.appendChild(div)
      //  }
 
    </script>
       
</body>
</html>
<!-- 这里是画圆点的代码
ctx.beginPath();
ctx.arc(e.clientX,e.clientY,10,0,2*Math.PI)
ctx.stroke();
ctx.fill(); -->